<template>
  <view class="plan-detail-container">
    <!-- 顶部导航 -->
    <view class="header">
      <view class="header-back" @click="goBack">
        <uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
      </view>
      <view class="header-title">套餐详情</view>
    </view>
    
    <!-- 套餐卡片 -->
    <view class="plan-card card" >
      <view class="plan-carrier">{{plan.carrier}}</view>
      <view class="plan-name">{{plan.name}}</view>
      <view class="plan-price">
        <text class="price-number">¥{{plan.monthly_fee}}</text>
        <text class="price-unit">/月</text>
      </view>
      <view class="plan-tag" v-if="plan.is_hot">热门推荐</view>
    </view>
    
    <!-- 套餐详情 -->
    <view class="detail-section">
      <view class="section-title">套餐内容</view>
      <view class="feature-list">
        <view class="feature-item">
          <image class="feature-icon" src="/static/icons/data.png"></image>
          <view class="feature-content">
            <text class="feature-value">{{plan.data_allowance >= 1024 ? (plan.data_allowance/1024).toFixed(0) + 'GB' : plan.data_allowance + 'MB'}}</text>
            <text class="feature-label">国内流量</text>
          </view>
        </view>
        <view class="feature-item">
          <image class="feature-icon" src="/static/icons/call.png"></image>
          <view class="feature-content">
            <text class="feature-value">{{plan.call_allowance}}分钟</text>
            <text class="feature-label">国内通话</text>
          </view>
        </view>
        <view class="feature-item">
          <image class="feature-icon" src="/static/icons/sms.png"></image>
          <view class="feature-content">
            <text class="feature-value">{{plan.sms_allowance}}条</text>
            <text class="feature-label">国内短信</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 套餐说明 -->
    <view class="detail-section">
      <view class="section-title">套餐说明</view>
      <view class="description-content">
        {{plan.description || '暂无详细说明'}}
      </view>
      <view class="detail-item">
        <text class="detail-label">有效期：</text>
        <text class="detail-value">{{plan.validity_period}}天</text>
      </view>
    </view>
    
    <!-- 订购按钮 -->
    <view class="order-footer">
      <view class="price-display">
        <text class="price-label">月费：</text>
        <text class="price-value">¥{{plan.monthly_fee}}</text>
      </view>
      <button class="order-button" @click="showOrderDialog">立即订购</button>
    </view>
    
    <!-- 订购弹窗 -->
    <uni-popup ref="orderPopup" type="bottom">
      <view class="order-dialog">
        <view class="dialog-header">
          <text class="dialog-title">确认订购</text>
          <uni-icons type="closeempty" size="24" color="#999" @click="closeOrderDialog"></uni-icons>
        </view>
        <view class="dialog-content">
          <view class="order-plan-info">
            <text class="plan-name">{{plan.name}}</text>
            <text class="plan-price">¥{{plan.monthly_fee}}/月</text>
          </view>
          <view class="form-item">
            <text class="form-label">手机号码</text>
            <input class="input" v-model="phoneNumber" placeholder="请输入要办理的手机号" type="number" />
          </view>
          <view class="agreement">
            <checkbox-group @change="toggleAgreement">
              <label>
                <checkbox :checked="agreed" color="#4a90e2" />
                <text>我已阅读并同意</text>
              </label>
            </checkbox-group>
            <text class="agreement-link" @click="viewAgreement">《用户服务协议》</text>
          </view>
        </view>
        <view class="dialog-footer">
          <button class="confirm-button" :disabled="!canSubmit" @click="submitOrder">确认订购</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      planId: '',
      plan: {
        name: '',
        carrier: '',
        monthly_fee: 0,
        data_allowance: 0,
        call_allowance: 0,
        sms_allowance: 0,
        validity_period: 30,
        description: '',
        is_hot: false
      },
      phoneNumber: '',
      agreed: false
    }
  },
  computed: {
    canSubmit() {
      return this.phoneNumber && this.phoneNumber.length === 11 && this.agreed
    }
  },
  onLoad(options) {
    this.planId = options.id
    this.getPlanDetail()
  },
  methods: {
    async getPlanDetail() {
      const res = await this.$api.get('/MobilePlan/get',{id:this.planId},true)
	  console.log('dsadsada',res)
	  if(res.data.code === 200) {
		  uni.setNavigationBarTitle({
		  	title:res.data.data.name
		  })
		  this.plan = res.data.data
	  }
    },
    goBack() {
      uni.navigateBack()
    },
    showOrderDialog() {
      this.$refs.orderPopup.open()
    },
    closeOrderDialog() {
      this.$refs.orderPopup.close()
    },
    toggleAgreement(e) {
      this.agreed = e.detail.value.length > 0
    },
    viewAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/service'
      })
    },
    async submitOrder() {
      if (!this.canSubmit) return
      
	  uni.showToast({
	    title: '订购成功',
	    icon: 'success'
	  })
      
    }
  }
}
</script>

<style lang="scss" scoped>
.plan-detail-container {
  padding-bottom: 120rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  height: 88rpx;
  background: linear-gradient(to right, #4a90e2, #5fb0e5);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  position: relative;
  
  .header-back {
    position: absolute;
    left: 30rpx;
  }
  
  .header-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
  }
}

.plan-card {
  margin: 30rpx;
  padding: 40rpx 30rpx;
  border-radius: 16rpx;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
  
  &.card {
    background: linear-gradient(135deg, #4a90e2, #5fb0e5);
  }

  
  .plan-carrier {
    font-size: 28rpx;
    opacity: 0.9;
    margin-bottom: 10rpx;
  }
  
  .plan-name {
    font-size: 40rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  
  .plan-price {
    .price-number {
      font-size: 60rpx;
      font-weight: bold;
    }
    
    .price-unit {
      font-size: 28rpx;
      opacity: 0.8;
      margin-left: 8rpx;
    }
  }
  
  .plan-tag {
    position: absolute;
    top: 30rpx;
    right: 30rpx;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 6rpx 16rpx;
    border-radius: 20rpx;
    font-size: 24rpx;
  }
}

.detail-section {
  background-color: #fff;
  margin: 20rpx 30rpx;
  padding: 30rpx;
  border-radius: 16rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 32rpx;
      background-color: #4a90e2;
      border-radius: 4rpx;
    }
  }
}

.feature-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  
  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    
    .feature-icon {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 15rpx;
    }
    
    .feature-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .feature-value {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 5rpx;
      }
      
      .feature-label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.description-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.detail-item {
  display: flex;
  font-size: 28rpx;
  margin-bottom: 15rpx;
  
  .detail-label {
    color: #999;
    width: 150rpx;
  }
  
  .detail-value {
    color: #333;
    flex: 1;
  }
}

.order-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .price-display {
    .price-label {
      font-size: 28rpx;
      color: #999;
    }
    
    .price-value {
      font-size: 36rpx;
      font-weight: bold;
      color: #f5222d;
    }
  }
  
  .order-button {
    background: linear-gradient(to right, #4a90e2, #5fb0e5);
    color: #fff;
    border-radius: 50rpx;
    width: 300rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 32rpx;
    margin: 0;
    
    &::after {
      border: none;
    }
  }
}

.order-dialog {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 30rpx;
  
  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    
    .dialog-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .order-plan-info {
    background-color: #f8f8f8;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 30rpx;
    
    .plan-name {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .plan-price {
      font-size: 28rpx;
      color: #f5222d;
    }
  }
  
  .form-item {
    margin-bottom: 30rpx;
    
    .form-label {
      display: block;
      font-size: 28rpx;
      color: #666;
      margin-bottom: 15rpx;
    }
    
    .input {
      border: 1rpx solid #eee;
      border-radius: 8rpx;
      padding: 20rpx;
      font-size: 28rpx;
      height: 80rpx;
      box-sizing: border-box;
    }
  }
  
  .agreement {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #666;
    margin-bottom: 40rpx;
    
    .agreement-link {
      color: #4a90e2;
    }
  }
  
  .dialog-footer {
    .confirm-button {
      background: linear-gradient(to right, #4a90e2, #5fb0e5);
      color: #fff;
      border-radius: 50rpx;
      height: 90rpx;
      line-height: 90rpx;
      font-size: 32rpx;
      
      &[disabled] {
        opacity: 0.6;
      }
      
      &::after {
        border: none;
      }
    }
  }
}
</style>